<template>
  <div class="charts" ref="charts" style="width: 800px;height: 500px">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'

export default {
  name: 'index',

//  页面初始化完成后操作dom节点
  mounted() {

    axios.get('http://localhost:8081/product/selectProductVO').then((req) => {
      console.log(req)
      console.log(req.data.names)
      console.log(req.data.stocks)
      let chartsType = echarts.init(this.$refs.charts)
      chartsType.setOption({
        xAxis: {
          type: 'category',
          data: req.data.names,
          axisLabel: {
            interval:0,
            // rotate:45, //代表逆时针旋转45度
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: req.data.stocks,
            type: 'bar',
            // showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }
            },

          }
        ],
      })
    })
  }

}
</script>

<style scoped>

</style>
